<!-- TabItem.vue -->
<template>
  <div class="tab" :class="{ tab_active: isActive }" @click="handleClick">
    <span class="tab__text--ellipsis">{{ label }}</span>
  </div>
</template>
// TabItem.vue
<script setup>
import { inject, defineSlots, onMounted, computed } from 'vue'

const props = defineProps({
  label: {
    type: String,
    default: '标签'
  }
})

const slots = defineSlots()

const registerTabItem = inject('registerTabItem', null)
const updateTabIndex = inject('updateTabIndex', null)
const currentIndex = inject('currentIndex', null)

let myIndex = -1

onMounted(() => {
  if (registerTabItem) {
    // ✅ 把 slots.default 包装成函数传入
    myIndex = registerTabItem({
      label: props.label,
      // ✅ 传入函数，不是执行结果！
      content: () => (slots.default ? slots.default() : [])
    })
  }
})

const isActive = computed(() => {
  return currentIndex.value === myIndex
})

const handleClick = () => {
  if (updateTabIndex && myIndex !== -1) {
    updateTabIndex(myIndex)
  }
}
</script>

<style lang="scss" scoped>
.tab {
  color: #323233;

  font-weight: 600;
  cursor: pointer;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  line-height: 20px;
  font-size: 14px;
  padding: 0 4px;
  height: 100%;
  transition: all .3s ease-out;

  &.tab_active {
    color: #fff;

    font-weight: bold;
  }

  .tab__text--ellipsis {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}
</style>